(function(window) {
    'use strict';

    // Your starting point. Enjoy the ride!

    const vm = new Vue({
        el: '#app',
        data: {
            msg: '测试vue',
            // 存储用户当前输入的单条
            userInput: '',
            // 存储用户输入所有数据
            list: [],
            // 一个标记
            editFlag: -1
        },
        methods: {

            enterDown(e) { //这个函数处理输入框回车被按下时
                if (e.keyCode === 13) {
                    console.log('回车被按下了，保存用户输入的信息');
                    // console.log(this.userInput); //获取用户刚刚输入的信息
                    // let id = this.list.length == 0 ? 1 : this.list[0].id + 1;
                    // this.list.unshift({
                    //     name: this.userInput,
                    //     done: false,
                    //     id
                    // });
                    // console.log(this.list);
                    axios.post('http://localhost:3000/list', {
                        name: this.userInput,
                        done: false
                    }).then(res => {
                        // console.log(this); Vue

                        console.log(res);
                        this.list.unshift(res.data);
                        // 清空输入框
                        this.userInput = '';
                    });
                }
            },
            enterUp(e, id) { // 编辑框的回车按下 
                this.editFlag = -1;

                console.log(e.target.value); //获取更改后的信息
                // 发送ajax请求修改服务器端数据
                axios.patch(`http://localhost:3000/list/${id}`, {
                    name: e.target.value
                }).then(res => {
                    console.log(res);
                });

            },
            finish(e, id) { //根据表单是否被勾选完成来更新数据(其实可以用v-model来绑定)
                // console.log(this.list[index].ischecked);

                this.list.find(v => v.id == id).done = !this.list.find(v => v.id == id).done;

                // console.dir(e.target.checked);
                // 发送ajax请求更改服务器数据
                axios.patch(`http://localhost:3000/list/${id}`, {
                    done: e.target.checked
                }).then(res => {
                    console.log(res);
                });
            },
            clearComplete() { //清除已完成的实现
                console.log('清除已完成被点了');
                // 找出list中完成选项清除即可
                this.list = this.list.filter(element => {
                    if (element.done === false) {
                        return element;
                    }
                });

                // console.log(this.list);

                // 发送ajax请求，更新数据库内容

            },
            destroy(id) { //删除指定项
                //点击删除按钮时的处理函数
                // console.log('北点了', index);
                this.list = this.list.filter(v => v.id != id);

                // 发送ajax请求删除服务端的数据
                axios.delete(`http://localhost:3000/list/${id}`).then(res => {
                    console.log(res);
                });
            },
            doubleClick(id) { // 双击菜单中任意一项，改变flag
                console.log('被双击了');
                this.editFlag = id;
            },
        },
        // 计算属性
        computed: {
            canShowFooter() {
                return this.list.length > 0;
            },
            canShowClCom() {
                return this.list.some(value => value.done == true);
            }
        },
        // 监听器
        // watch: {
        //     list: {
        //         deep: true,
        //         handler: function(newData) {
        //             // console.log(newData);  //监听list成功
        //             window.localStorage.setItem('list', JSON.stringify(this.list));
        //         }
        //     }
        // },
        // 钩子函数
        created() { //遍历data中的数据，劫持并赋值给vm后
            console.warn('响应式数据已部署');

            // this.list = JSON.parse(window.localStorage.getItem('list')) || [];
            // 利用axios连接服务器获取数据
            axios.get('http://localhost:3000/list?_sort=id&_order=desc').then(res => { //箭头函数没有this 你妈的
                console.log(res.data);
                // console.log(this);
                this.list = res.data;
            });
        }
    });

})(window);